<template>
  <div class="GetPlace">
    <span>上下车地点:</span>
    <select v-model="selectedLocation">
      <option value="" disabled selected></option>
      <option
        :value="item.pickup_location"
        v-for="(item, index) in resultData"
        :key="index"
      >
        {{ item.pickup_location }}
      </option>
    </select>
  </div>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, watch, getCurrentInstance } from "vue";
let selectedLocation = ref("");
let id = ref();
const resultData = ref([]);
const { emit } = getCurrentInstance();
const baseUrl = "/api";
onLoad((any) => {
  uni.request({
    url: baseUrl + "/get/list", //仅为示例，并非真实接口地址。
    method: "get",
    success: (res) => {
      resultData.value = res.data.data;
    },
  });
});
watch(selectedLocation, (Place, oldValue) => {
  console.log(Place);
});
watch(selectedLocation, (Place) => {
  // 查找匹配的对象，获取对应的 id
  const selectedItem = resultData.value.find(
    (item) => item.pickup_location === Place
  );
  if (selectedItem) {
    // 触发事件，将 id 传递给父组件
    emit("update-selected-id", selectedItem.id);
  }
});
</script>
<style scoped>
.GetPlace {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  /* margin-left: 1rem; */
}
select {
  width: 15rem;
  height: 2rem;
}
</style>
